<template>
    <div>
        <div v-if="data.flag">
            <h2>Vuex 基本学习 </h2>
            <h4>inp =={{inp}}</h4>
            <h4>count -- {{count}}  -- {{count2}}  - {{count3}} -- {{count4 }}  -- {{count5 }}  --- {{newCount}}</h4>
            <h3>city --- {{city}} {{city1}} -- {{city2}}  -- {{city3}}</h3>
            <h4>msg --- {{msg}} {{msg1}}  --- {{msg2 }}</h4>
            <h5>word1 ---{{word1}}  {{word}} </h5>
            <h3>data -- txt -- {{data.txt}}  -- num -- {{data.num}}</h3>
            <hr>
            <p>
                <button @click="countadd">count+1 </button>
                <button @click="countdesc">count -  1 </button>
                <button @click="changeCount(100)">change count  </button>
                <button @click="changeCountAc(50)">change count  action  </button>
            </p>
            <p>
                <button @click="changeCity('想去杭州 20K')">想去杭州 20K</button>
                <button @click="changeMsg('2107-人人一个转介绍')" >2107-人人一个转介绍</button>
                <button @click="changeInp('2107 - 一定要精通 Vue ')" >点击修改inp </button>
            </p>
            <p>
                <input type="text" v-model="word1">
            </p>
        </div>
        <p> <button @click="changeDataText('wh2107-天天干到晚上2点')"> 点击修改 text  </button>
            <button @click="changeDataNum(50)">点击修改num  -50 </button>
            <button @click="changeDataFlag(!data.flag )">点击修改flag </button>
         </p>
        <button @click="changeUsersAsync">点击获取users </button>
         <div> 
            <p v-for="(l,i) in data.users" :key="i" >
               {{l.username}} / {{l.phone}} -=- {{i}}
            </p>
         </div>
         <div>
           <hr> 
           <h2>some - some - some </h2>
           <h3 @click="changeNumber(60)">number == {{number}}</h3>
           <h4 @click="changeWhoAc('zkl_2107')">who --- {{who}}</h4>
         </div>
    </div>
</template>


<script>
import {mapMutations, mapState,mapGetters,mapActions} from "vuex"
import axios from "axios"
axios.defaults.baseURL= "http://localhost:2107/";
export default {
    data(){
        return {
            count1:this.$store.state.count,
            city1:this.$store.state.city 
        }
    },
    computed:{
        ...mapGetters([
            'newCount'
        ]),
        // mapState 对象的映射  一一映射
        ...mapState({
            count3:state=>state.count,  
            count4(state){
                // return state.count 
                return state['count']
            },
            count5:'count',  //  传字符串参数 'count' 等同于 `state => state.count`
            city3:'city',
            msg2:'msg'
        }),    
        ...mapState([
            'count',   // this.count =  store.state.count 
            'city',
            'msg',
            'word',
            'data',
            'inp'
        ]),
        ...mapState('some',['number','who']),
        count2(){
            return this.$store.state.count 
        },
        city2(){
            return this.$store.state.city 
        },
        msg1(){
            return this.$store.state.msg;
        },
        word1:{
            get(){
                return this.$store.state.word
            },
            set(v){
                console.log(v);
                // this.$store.commit('changeWord',v)
                this.changeWord(v)
            }
        },
        data1(){
            return this.$store.state.data
        }
    },
    methods:{
        ...mapMutations([
            'countadd',  // this.countadd = this.$store.commit("countadd")
            'countdesc',
            'changeCount',
            'changeCity',  // this.changeCity = this.$store.commit("changeCity")
            'changeMsg',
            'changeDataText',
            'changeDataNum',
            'changeDataFlag',
            'changeWord',
            'changeInp'
        ]),
        ...mapActions([
          'changeCountAc',
          'changeInpAsync',
          'changeUsersAsync'
        ]),
        ...mapMutations('some',['changeNumber']),
        ...mapActions('some',['changeWhoAc'])
        // changeCountAc(n){
        //   this.$store.dispatch('changeCountAc',n)  // dispatch 发送一个action 
        // }
        // countadd(){  // 提交commit mutations 
        //     this.$store.commit("countadd");   // mutation handler
        // },
        // countdesc(){
        //     this.$store.commit("countdesc")
        // },
        // changeCount(n){
        //     this.$store.commit("changeCount",n);
        // },
        // changeCity(city){
        //     this.$store.commit('changeCity',city)
        // },
        // changeMsg(msg){
        //     this.$store.commit("changeMsg",msg)
        // },
        // changeDataText(text){
        //     this.$store.commit("changeDataText",text)
        // },
        // changeDataNum(n){
        //     this.$store.commit("changeDataNum",n);
        // },
        // changeDataFlag(flag){
        //     this.$store.commit("changeDataFlag",flag);
        // }
    },
    mounted(){
        console.log(this.$store)
        this.changeInpAsync()
      //  axios.get("/first")
      //  .then(res=>{
      //    console.log(res)
      //   //  成功的回调的里面发送一个 mutations 
      //    this.changeInp(res.data[1])   // store.commit("changeInp",res.data[1])
      //  })
    }
}
</script>

